import React, { lazy, Suspense } from 'react';
import { Navigate } from 'react-router-dom'
import Home from '@/view/Home'
import Page3p1 from '@/view/Page3p1';
import Page3p2 from '@/view/Page3p2';
// import About from '@/view/About'
// import User from '@/view/User';

const About = lazy(() => import('@/view/Page3p1'));
const User = lazy(() => import('@/view/User'));
const Page1 = lazy(() => import('@/view/Page1'));
const Page2 = lazy(() => import('@/view/Page2'));

// 报错内容
// Uncaught Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.
// 原因： 使用React懒加载 需要 一个加载组件配合 Suspense

const withLoading = (view: JSX.Element) => (
  <Suspense fallback={<div>loading...</div>}>
    {view}
  </Suspense>
)

const router: any[] = [
  {
    path: '/',
    element: <Navigate to={'/page1'} />
  },
  {
    path: '/',
    element: <Home />,
    children: [
      {
        path: '/page1',
        element: withLoading(<Page1 />)
      },
      {
        path: '/page2',
        element: withLoading(<Page2 />)
      },
      {
        path: '/page3/p1',
        element: withLoading(<Page3p1 />)
      },
      {
        path: '/page3/p2',
        element: withLoading(<Page3p2 />)
      },
    ]
  },
  {
    path: '*',
    element: <Navigate to={'/page1'} />
  },
  // {
  //   path: '/home',
  //   element: <Home />
  // },
  // {
  //   path: '/about',
  //   element: withLoading(<About />)
  // },
  // {
  //   path: '/use',
  //   element: withLoading(<User />)
  // },
];

export default router